<template>
	<a-tabs class="bill-inner-tabs" destroy-inactive-tab-pane>
		<template #rightExtra>
			<div id="bill_serach" />
		</template>
		<a-tab-pane key="bill" tab="账单" v-if="hasPermissions(['mk_contract_finance_bill'])">
			<contract-bill
				:approvalStatus="props.approvalStatus"
				:type="props.type"
				:contractType="props.contractType"
				:query="query"
				:isValid="props.isValid"
				:source="source"
				:search-container="searchContainer" />
		</a-tab-pane>
		<a-tab-pane key="detail" tab="明细" v-if="hasPermissions(['mk_finance_bill_detail'])">
			<bill-detail
				:approvalStatus="props.approvalStatus"
				:query="query"
				:isValid="props.isValid"
				:search-container="searchContainer" />
		</a-tab-pane>
		<a-tab-pane key="flow" tab="流水" v-if="hasPermissions(['mk_finance_bill_flow'])">
			<bill-flow :approvalStatus="props.approvalStatus" :query="query" :search-container="searchContainer" />
		</a-tab-pane>
	</a-tabs>
</template>

<script lang="ts" setup>
	import {useStore} from '@/store'
	import ContractBill from '@/pages/finance/contract-bill/index.vue'
	import BillDetail from '@/pages/finance/bill-detail/index.vue'
	import BillFlow from '@/pages/finance/bill-flow/index.vue'

	const props = withDefaults(
		defineProps<{
			query: any
			source?: string
			searchContainer?: string | boolean
			contractType?: number | null
			approvalStatus?: number | string
			type?: number | string | null
			isValid?: null | boolean
		}>(),
		{
			searchContainer: '#bill_serach'
		}
	)

	const hasPermissions = useStore().hasPermissions
</script>

<style lang="less" scoped>
	.bill-inner-tabs {
		height: 100%;

		#bill_serach {
			width: 600px;
		}

		:deep(> .ant-tabs-nav) {
			margin-bottom: 0;
		}

		:deep(> .ant-tabs-content-holder) {
			height: 100%;

			> .ant-tabs-content {
				height: 100%;

				> .ant-tabs-tabpane {
					padding: 0;
				}
			}
		}
	}
</style>
